<template>
    <div class="herder">
        <div class="collapse-btn">
            <i class="el-icon-menu" @click="collapseChange"></i>
        </div>
        <div>music后台管理</div>
    </div>
</template>

<script>
    import bus from '../assets/js/bus'

    export default {
        data() {
            return {
                collapse: true
            }
        },
        methods: {
            collapseChange() {
                this.collapse = !this.collapse
                //发送消息
                bus.$emit('collapse', this.collapse)
            }
        },
    }
</script>

<style scoped>
    .herder {
        position: relative;
        background-color: #253041;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        color: #FFF;
        line-height: 70px;
    }

    .collapse-btn {
        float: left;
        padding: 0 21px;
        cursor: pointer;
        line-height: 70px;
    }
    .sidebar{
        height: 100%;
    }
</style>